<template>
  <div class="login_mobile_wrap">
    <div class="welcome_title">
      <div class="primary_title">您好，欢迎登录!</div>
      <div class="assistant_title">推荐使用账号密码登录</div>
    </div>

    <div class="login_form_box">
      <van-field
        class="input_username"
        v-model="loginFormData.username"
        label="账号"
        placeholder="请输入账号"
        label-align="top"
      />
      <van-field
        class="input_password"
        v-model="loginFormData.password"
        label="密码"
        type="password"
        placeholder="请输入密码"
        label-align="top"
      />
      <div></div>
    </div>

    <div class="btn_box">
      <van-button type="primary" class="login_btn" @click="loginClick">登录</van-button>
    </div>
    <!-- <van-overlay :show="isShowLoadingOverlay" @click="isShowLoadingOverlay = false">
      <div class="loading_box">
        <van-loading color="#1989fa" />
        <span class="loading_text">登录中</span>
      </div>
    </van-overlay> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import "./index.scss";
export default defineComponent({
  name: "LoginMobile"
});
</script>
<script lang="ts" setup>
import { showToast, showLoadingToast } from "vant";
import { loginApi } from "@/api/modules/login";
import dayjs from "dayjs";
// import { HOME_URL } from "@/config";
import { useRouter } from "vue-router";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { useUserStore } from "@/stores/modules/user";
import { useAuthStore } from "@/stores/modules/auth";
import { useTabsStore } from "@/stores/modules/tabs";

const keepAliveStore = useKeepAliveStore();
const userStore = useUserStore();
const authStore = useAuthStore();
const tabsStore = useTabsStore();
const router = useRouter();

// 显示加载遮罩层标识
// const isShowLoadingOverlay = ref(false);

onMounted(() => {});

// 登录表单数据
const loginFormData = ref({
  username: "",
  password: ""
});

// 字段校验函数
const fieldVFunc = () => {
  let flag;
  if (loginFormData.value.password != "" && loginFormData.value.username != "") {
    flag = true;
  } else if (loginFormData.value.username != "" && loginFormData.value.password == "") {
    showToast("请输入密码");
    flag = false;
  } else if (loginFormData.value.username == "" && loginFormData.value.password != "") {
    showToast("请输入账号");
    flag = false;
  } else if (loginFormData.value.username == "" && loginFormData.value.password == "") {
    showToast("请输入账号和密码");
    flag = false;
  }
  return flag;
};

// 登录点击事件
const loginClick = async () => {
  // isShowLoadingOverlay.value = true;
  showLoadingToast("登录中");
  if (fieldVFunc()) {
    console.log("进行登录");
    await loginApi({
      account: loginFormData.value.username,
      psw: loginFormData.value.password
    })
      .then(async res => {
        console.log(res, "res");

        if (res.result == "success") {
          console.log("登录res", res);

          // 存储token
          userStore.setToken(res.data.accessToken);

          // 存储用户信息
          console.log("userInfo", userStore.userInfo);
          userStore.userInfo.name = res.data.name;
          userStore.userInfo.id = res.data.id;
          userStore.userInfo.account = res.data.account;
          userStore.userInfo.isManager = res.data.isManager;

          authStore.getAuthMenuList();

          let setLocalData = {
            token: res.data.accessToken,
            userInfo: {
              name: res.data.name,
              id: res.data.id,
              account: res.data.account,
              isManager: res.data.isManager
            }
          };

          localStorage.setItem("geeker-user", JSON.stringify(setLocalData));

          // getAuthMenuListApi();

          // 设置存token的时间
          let setTokenTime = dayjs().valueOf();
          console.log("存Token时间", setTokenTime);
          localStorage.setItem("setTokenTime", JSON.stringify(setTokenTime));

          // 2.添加动态路由
          await initDynamicRouter();

          // 3.清空 tabs、keepAlive 数据
          tabsStore.setTabs([]);
          keepAliveStore.setKeepAliveName([]);

          // 4.跳转到首页
          // setTimeout(() => {
          console.log("当前路由表", authStore.authMenuList);

          router.push("/mobileIndex/index");
          // router.push("/goodsMobile/index");
          // ElNotification({
          //   title: getTimeState(),
          //   message: "欢迎登录!",
          //   type: "success",
          //   duration: 3000
          // });
          // }, 2000);
          showToast("欢迎登录");
        } else {
          // ElMessage.error(res.msg);
          showToast(res.msg);
        }
      })
      .finally(() => {
        // isShowLoadingOverlay.value = false;
      });
    // } else {
    //   ElMessage.error("请先进行验证");
    // }
  }
};
</script>

<style lang="scss" scoped>
:deep(.van-field) {
  background: none;
  .van-field__label {
    margin-bottom: 10px;
    font-size: 17px;
    letter-spacing: 4px;
  }
  .van-field__value {
    // border-bottom: 1px solid red;
    .van-field__body {
      .van-field__control {
        font-size: 14px;
        letter-spacing: 1px;
      }
    }
  }
}
:deep(.van-button) {
  letter-spacing: 6px;
  background: linear-gradient(160.78deg, rgb(29 178 255 / 100%) 0%, rgb(4 123 255 / 100%) 100%);
  border: none;
  border-radius: 55px;
  .van-button__content {
    position: relative;
    left: 2px;
  }
}
</style>
